<template>
  <section
    ref="pieSaleAccountsRef"
    class="dashboard"
  />
</template>
<script lang="ts">
import {
  defineComponent, ref, nextTick, watch, onMounted,
} from 'vue';

import { useDebounceFn } from '@vueuse/core';
import { init } from 'echarts';

export default defineComponent({
  name: 'PieSaleAccount',
  props: {
    channel: {
      type: String,
      default: 'all',
    },
  },
  setup(props) {
    const chartData = ref<TypeObject[]>([]);
    const pieSaleAccountsRef = ref();

    const createChart = () => {
      const pieSaleAccountsChart = init(pieSaleAccountsRef.value);
      const option: TypeObject = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          text: '销售额',
          left: 'center',
          top: '42%',
          textStyle: {
            fontSize: 18,
            align: 'center',
            color: '#444444',
            fontWeight: 400,
          },
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '50%',
          style: {
            text: '15781',
            fontSize: 34,
            fontWeight: 600,
          },
        },
        series: [
          {
            name: '销售额',
            type: 'pie',
            radius: ['55%', '80%'],
            avoidLabelOverlap: false,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          }
        ],
      };
      if (props.channel === 'online') {
        option.series[0].data = [
          { value: 2000, name: '家用电器' },
          { value: 3000, name: '食用酒水' },
          { value: 3000, name: '个护健康' },
          { value: 2000, name: '服饰箱包' },
          { value: 1100, name: '母婴产品' },
          { value: 1000, name: '其他' }
        ];
        option.graphic.style.text = '12100';
      } else if (props.channel === 'store') {
        option.series[0].data = [
          { value: 544, name: '家用电器' },
          { value: 321, name: '食用酒水' },
          { value: 113, name: '个护健康' },
          { value: 341, name: '服饰箱包' },
          { value: 131, name: '母婴产品' },
          { value: 231, name: '其他' }
        ];
        option.graphic.style.text = '3681';
      } else {
        option.series[0].data = [
          { value: 4544, name: '家用电器' },
          { value: 3321, name: '食用酒水' },
          { value: 3113, name: '个护健康' },
          { value: 2341, name: '服饰箱包' },
          { value: 1231, name: '母婴产品' },
          { value: 1231, name: '其他' }
        ];
        option.graphic.style.text = '15781';
      }

      pieSaleAccountsChart.setOption(option);
      window.addEventListener('resize', useDebounceFn(() => {
        pieSaleAccountsChart.resize();
      }, 200));
    };

    watch(
      () => props.channel,
      () => {
        nextTick(() => {
          createChart();
        });
      },
      {
        immediate: true,
      }
    );

    onMounted(() => {
      nextTick(() => {
        createChart();
      });
    });

    return {
      chartData,
      pieSaleAccountsRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 360px;
}
</style>
